<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="father">
    <h>title</h>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>


<script>

    //对应css中的选择器
    var h1 = document.getElementsByTagName('h1');
    var h1 = document.getElementById('p1');
    var h1 = document.getElementsByClassName('p2');
    var father = document.getElementById('father')

    var childrens = father.children; //获取父节点下所有的子节点
    // father.firstChild 获取父节点下第一个子节点
    // father.lastChild 获取父节点下最后一个子节点

</script>

</body>
</html>